<template>
  <div id="footer">
    <div class="footer-main">
      <div class="left fl">
        <p class="tel">咨询电话</p>
        <p class="phone">{{config.site_phone}}</p>
        <a :href="'http://wpa.qq.com/msgrd?v=3&uin='+ config.site_QQ + '&site=qq&menu=yes'" target="_blank" class="qq"></a>
      </div>
      <div class="qr fl clearfix">
        <div class="qr-items fl">
          <ul>
            <li class="wechat active" @mouseenter="enter(0)"></li>
            <li class="android" @mouseenter="enter(1)"></li>
            <li class="apple" @mouseenter="enter(2)"></li>
            <li class="weibo" @mouseenter="enter(3)"></li>
          </ul>
        </div>
        <div class="qr-con fl">
          <img :src="qrSrc">
        </div>
      </div>
      <div class="right fr">
        <div class="links">
          <a class="link clearfix" v-for="(link, index) in links" :href="link.url" target="_blank">
            {{link.title}}
          </a>
        </div>
        <div class="copy">
          <p>&copy; {{year}} {{config.site_copy}}</p>
          <p>{{config.site_beian}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {sckr} from  '@/lib/sckr'
  import jsonp from 'jsonp'
  export default{
    data () {
      return {
        year: (new Date()).getFullYear(),
        config: {
          type: Object
        },
        links: {
          type: Array
        },
        qrSrc: require('@/assets/footer/wechat.png')
      }
    },
    created () {
      let web = this
      jsonp(sckr.api + 'set', null, function (err, result) {
        if (err) {
          console.error(result.message);
        } else {
          web.config = JSON.parse(result.option_value)
        }
      })
      jsonp(sckr.api + 'link', null, function (err, result) {
        if (err) {
          console.error(result.message);
        } else {
          web.links = result
        }
      })
    },
    methods: {
      enter (index) {
        switch (index) {
          case 1: this.qrSrc = require('@/assets/footer/android.png'); $('.android').addClass('active').siblings().removeClass('active')
            break
          case 2: this.qrSrc = require('@/assets/footer/apple.png'); $('.apple').addClass('active').siblings().removeClass('active')
            break
          case 3: this.qrSrc = require('@/assets/footer/weibo.png'); $('.weibo').addClass('active').siblings().removeClass('active')
            break
          default: this.qrSrc = require('@/assets/footer/wechat.png'); $('.wechat').addClass('active').siblings().removeClass('active')
        }
      }
    }
  }
</script>
<style scoped>
  #footer{ background-color: #1570D6; height: 260px; color: #fff; }
  .footer-main{max-width: 1200px; margin: 0 auto; padding: 50px 0px;}
  .left{background: url("../../assets/footer/phone.png") no-repeat; padding-left: 30px; }
  .right{width: 300px;}
  .left p{margin-bottom: 20px;}
  .phone{font-size: 30px;}
  .qq{display: block; background: url("../../assets/footer/qq.png") no-repeat; width: 185px; height: 59px}
  .qr{margin-left: 240px;}
  .qr li{width: 35px; height: 35px; margin-bottom: 2px; background-repeat: no-repeat; background-image: url("../../assets/footer/icon.png") }
  .qr li:hover, .qr li.active{background-image: url("../../assets/footer/icon1.png") }
  .wechat{background-position: 0 0}
  .android{background-position: 0 -40px;}
  .apple{background-position: 0 -80px;}
  .weibo{background-position: 0 -120px;}
  .qr-con{margin-left: 20px;  background-color: #fff; padding: 4px; padding-bottom: 0px;}
  a.link{display: inline-block; padding: 10px; color: #fff}
  a.link:hover{text-decoration: underline}
  .copy{margin-top: 20px;}
  .copy p{margin-top: 10px;}
</style>
